<template>
  <div>
    <u-form label-align="right" :label-style="{'font-weight':'bold'}" :model="addressForm" class="form" label-width="150" ref="uForm">
      <u-form-item label="收件人：" prop="consigneeName">
        <u-input v-model="addressForm.consigneeName" />
      </u-form-item>
      <u-form-item label="联系方式：" prop="consigneeMobile">
        <u-input v-model="addressForm.consigneeMobile" />
      </u-form-item>
      <u-form-item label="地址信息：" prop="consigneeAddressIdPath" @click="showPicker()">
        <u-input disabled @click="showPicker()" v-model="addressForm.___path" />
      </u-form-item>
      <u-form-item label="详细地址：" prop="consigneeDetail">
        <u-input v-model="addressForm.consigneeDetail" />
      </u-form-item>
      <div class="submit" @click="update">
        修改地址
      </div>
    </u-form>
    <city :provinceData="list" headTitle="区域选择" ref="cityPicker" @funcValue="getpickerParentValue" pickerSize="4" />
  </div>
</template>

<script>
import { editOrderConsignee } from "@/api/order";
import city from "@/components/m-city/m-city";
export default {
  components: {
    city,
  },
  data() {
    return {
      // 地址选择
      addressForm: {
        consigneeName: "",
        consigneeMobile: "",
        consigneeDetail: "",
        ___path: "",
        consigneeAddressIdPath: [],
        consigneeAddressPath: [],
      },
      list: [
        {
          id: "",
          localName: "请选择",
          children: [],
        },
      ],
      rules: {
        consigneeName: [
          {
            required: true,
            message: "收件人姓名不能为空",
            trigger: ["blur", "change"],
          },
        ],
        consigneeMobile: [
          {
            required: true,
            message: "手机号码不能为空",
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: "手机号码不正确",
            trigger: ["change", "blur"],
          },
        ],
        consigneeAddressIdPath: [
          {
            required: true,
            message: "请选择所在区域",
            trigger: ["change"],
          },
        ],
        consigneeDetail: [
          {
            required: true,
            message: "请填写详细地址",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad(options) {
    this.routerVal = JSON.parse(decodeURIComponent(options.data));
    let order = JSON.parse(decodeURIComponent(options.data));
    this.addressForm.consigneeName = order.consigneeName;
    this.addressForm.consigneeMobile = order.consigneeMobile;
    this.addressForm.consigneeDetail = order.consigneeDetail;
    this.addressForm.___path = order.consigneeAddressPath;
    this.addressForm.consigneeAddressIdPath = order.consigneeAddressIdPath;
    this.addressForm.consigneeAddressPath = order.consigneeAddressPath;
  },
  methods: {
    // 显示三级地址联动
    showPicker() {
      this.$refs.cityPicker.show();
    },
    // 选择地址回调
    getpickerParentValue(e) {
      this.addressForm.consigneeAddressIdPath = [];
      let name = "";
      e.forEach((item, index) => {
        if (item.id) {
          // 遍历数据
          this.addressForm.consigneeAddressIdPath.push(item.id);
          name += item.localName;
          this.addressForm.___path = name;
        }
      });
    },
    // 修改/更新数据
    update() {
      this.$refs.uForm.validate(async (valid) => {
        if (valid) {
          uni.showLoading({
            title: "加载中",
            mask: "true",
          });
          let data = JSON.parse(JSON.stringify(this.addressForm));
          delete data.___path;

          let res = await editOrderConsignee(this.routerVal.sn, data);
          uni.hideLoading();
          if (res.data.success) {
            uni.showToast({
              title: "修改成功",
              duration: 2000,
              icon: "none",
            });

            setTimeout(() => {
              uni.navigateBack();
            }, 500);
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import './style.scss';
.form {
  padding: 32rpx;
  background: #fff;
}

</style>